import React, { useState } from "react";
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  TextField,
  Button,
  Box,
} from "@mui/material";
import CloudUploadIcon from "@mui/icons-material/CloudUpload";

import { ThemeProvider, CssBaseline } from "@mui/material";
import theme from "../themes/theme "

interface CreateModelDialogProps {
  open: boolean;
  onClose: () => void;
  onSuccess?: () => void; // 上传成功后的回调，可选
}

const CreateModelDialog: React.FC<CreateModelDialogProps> = ({
  open,
  onClose,
  onSuccess,
}) => {
  const [file, setFile] = useState<File | null>(null);
  const [version, setVersion] = useState("");
  const [description, setDescription] = useState("");
  const [uploading, setUploading] = useState(false);

  const handleSubmit = async () => {
    if (!file || !version) {
      alert("请上传模型文件并填写版本号！");
      return;
    }

    const formData = new FormData();
    formData.append("file", file);
    formData.append("version", version);
    formData.append("description", description);

    setUploading(true);
    try {
      const response = await fetch("/api/models/upload", {
        method: "POST",
        body: formData,
      });
      if (response.ok) {
        alert("上传成功！");
        onClose();
        if (onSuccess) onSuccess();
        setFile(null);
        setVersion("");
        setDescription("");
      } else {
        const errorText = await response.text();
        alert(`上传失败: ${errorText}`);
      }
    } catch (error) {
      console.error(error);
      alert("请求出错");
    } finally {
      setUploading(false);
    }
  };

  return (
<ThemeProvider theme={theme}>
      <CssBaseline />
    <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
      <DialogTitle>创建新模型</DialogTitle>
      <DialogContent>
        <Box mt={2}>
          <Button
            variant="outlined"
            component="label"
            startIcon={<CloudUploadIcon />}
            fullWidth
            disabled={uploading}
          >
            {file ? `已选择文件：${file.name}` : "选择模型文件"}
            <input
              type="file"
              hidden
              onChange={(e) => {
                if (e.target.files?.length) {
                  setFile(e.target.files[0]);
                }
              }}
            />
          </Button>
        </Box>
        <Box mt={2}>
          <TextField
            label="版本号"
            variant="outlined"
            fullWidth
            value={version}
            onChange={(e) => setVersion(e.target.value)}
            placeholder="例如：V1.0.0"
            disabled={uploading}
          />
        </Box>
        <Box mt={2}>
          <TextField
            label="描述信息"
            variant="outlined"
            fullWidth
            multiline
            minRows={3}
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            placeholder="填写模型用途、更新内容等"
            disabled={uploading}
          />
        </Box>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} disabled={uploading}>取消</Button>
        <Button
          onClick={handleSubmit}
          variant="contained"
          color="primary"
          disabled={uploading}
        >
          {uploading ? "上传中…" : "提交"}
        </Button>
      </DialogActions>
    </Dialog>
</ThemeProvider>
  );
};

export default CreateModelDialog;
